import 'package:flutter/material.dart';
import 'package:flutter_components_web/components/shared/com_button.dart';
import 'package:flutter_components_web/components/shared/com_hover.dart';
import 'package:flutter_components_web/utils/gap.dart';
import 'package:flutter_components_web/utils/responsive.dart';

import '../../cons/constant.dart';

class ComTable extends StatefulWidget {
  const ComTable({super.key});

  @override
  State<ComTable> createState() => _ComTableState();
}

class _ComTableState extends State<ComTable> with Constants {
  // 标题
  final List titles = [
    ("id", "ID", _Type.text),
    ("startDate", "Start Date", _Type.text),
    ("amountWithdraw", "Amount Withdraw", _Type.text),
    ("canWithdraw", "Can Withdraw", _Type.text),
    ("degree", "Degree", _Type.text),
    ("status", "Status", _Type.button),
  ];
  late List titlesDefault;
  late List titlesSm;
  late List titlesMd;
  late List titlesLg;
  late List titlesXl;

  // 数据
  late List<Map<String, String>> data;

  @override
  void initState() {
    data = List.generate(10000, (index) {
      return {
        "id": "#185941",
        "startDate": "2024-11-28",
        "amountWithdraw": "\$40,000",
        "canWithdraw": "\$20,000",
        "degree": "02",
      };
    });
    titlesDefault = [titles.first, titles.last];
    titlesSm = [titles.first, titles[1], titles.last];
    titlesMd = [titles.first, titles[1], titles[2], titles.last];
    titlesLg = [titles.first, titles[1], titles[2], titles[3], titles.last];
    titlesXl = titles;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: primaryColor,
      body: CustomScrollView(slivers: [_buildHeader(), _buildBody()]),
    );
  }

  List get titleResponsive => context.responsive<List>(
    titlesDefault,
    sm: titlesSm,
    md: titlesMd,
    lg: titlesLg,
    xl: titlesXl,
  );

  _buildBody() {
    return SliverList.separated(
      itemBuilder: (ctx, index) {
        return ComHover(
          child: _buildTableRow(index),
          hoverColor: secondaryColor,
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Container(width: 1, height: 1, color: divideColor);
      },
    );
  }

  _buildTableRow(int index) {
    return Row(
      children:
          titleResponsive.map((e) {
            return Expanded(
              child: Container(
                alignment: Alignment.center,
                padding: EdgeInsets.symmetric(vertical: 10),
                child:
                    e.$3 == _Type.button
                        ? _buildCusButtons()
                        : Text(
                          data[index][e.$1] ?? "",
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.white.withValues(alpha: .5),
                          ),
                          textAlign: TextAlign.center,
                        ),
              ),
            );
          }).toList(),
    );
  }

  _buildHeader() {
    return SliverAppBar(
      floating: true,
      backgroundColor: primaryColor,
      toolbarHeight: 70,
      title: Container(
        margin: EdgeInsets.only(top: 10, bottom: 5),
        decoration: BoxDecoration(
          color: secondaryColor,
          borderRadius: BorderRadius.all(Radius.circular(10)),
          border: Border.all(color: divideColor),
        ),
        child: Row(
          children:
              titleResponsive.map((e) {
                int index = titleResponsive.indexOf(e);
                Color borderColor =
                    index != titleResponsive.length - 1
                        ? divideColor
                        : Colors.transparent;
                return Expanded(
                  child: Container(
                    height: 50,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      border: Border(right: BorderSide(color: borderColor)),
                    ),
                    child: Text(
                      e.$2,
                      style: TextStyle(fontSize: 18, color: Colors.white),
                    ),
                  ),
                );
              }).toList(),
        ),
      ),
    );
  }

  _buildCusButtons() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        ComButton(
          text: "Payout Request",
          textColor: thirdColor,
          bgColor: primaryButtonColor,
        ),
        10.box(),
        ComButton(
          text: "Detail",
          textColor: primaryButtonColor,
          bgColor: thirdColor,
        ),
      ],
    );
  }
}

enum _Type { button, text }
